.funnel-step-modal {
	.ant-modal-content {
		background: var(--bg-ink-400);
		.ant-modal-header {
			background: var(--bg-ink-400);
			.ant-modal-title {
				color: var(--bg-vanilla-100);
				font-family: Inter;
				font-size: 14px;
				line-height: 20px;
			}
		}
		.ant-modal-body {
			padding-bottom: 20px;
		}
	}

	&__ok-btn {
		display: flex;
		align-items: center;
		gap: 6px;
		background: var(--bg-robin-500);
		border: none;

		&[disabled] {
			background: var(--bg-slate-400);
			opacity: 1;
		}

		.ant-btn-icon {
			margin-inline-end: 0 !important;
		}
	}

	&__cancel-btn {
		display: flex;
		align-items: center;
		gap: 6px;
		color: var(--bg-vanilla-400);

		.ant-btn-icon {
			margin-inline-end: 0 !important;
		}
	}
}

.funnel-step-modal-content {
	display: flex;
	flex-direction: column;
	gap: 28px;

	&__field {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	&__label {
		color: var(--bg-vanilla-100);
		font-family: Inter;
		font-size: 14px;
		font-weight: 500;
		line-height: 20px;
	}

	&__input {
		background: var(--bg-ink-300);
		border: 1px solid var(--bg-slate-500);
		color: var(--bg-vanilla-400);

		&::placeholder {
			color: var(--bg-vanilla-400);
			opacity: 0.6;
		}

		&.ant-input-textarea {
			.ant-input {
				background: var(--bg-ink-300);
				border: 1px solid var(--bg-slate-500);
				color: var(--bg-vanilla-400);

				&::placeholder {
					color: var(--bg-vanilla-400);
					opacity: 0.6;
				}
			}
		}
	}
}

// Light mode styles
.lightMode {
	.funnel-step-modal {
		.ant-modal-content {
			.ant-modal-header {
				background: var(--bg-vanilla-100);
				.ant-modal-title {
					color: var(--bg-ink-400);
				}
			}
		}

		&__cancel-btn {
			color: var(--bg-ink-400);
		}
	}

	.funnel-step-modal-content {
		&__label {
			color: var(--bg-ink-400);
		}

		&__input {
			background: var(--bg-vanilla-400);
			border: 1px solid var(--bg-vanilla-300);
			color: var(--bg-ink-400);

			&::placeholder {
				color: var(--bg-ink-100);
			}

			&.ant-input-textarea {
				.ant-input {
					background: var(--bg-vanilla-400);
					border: 1px solid var(--bg-vanilla-300);
					color: var(--bg-ink-400);

					&::placeholder {
						color: var(--bg-ink-100);
					}
				}
			}
		}
	}
}
